<template>
  <div>
    <div class="normalPost" v-if="postData.type == 1">
      <div class="header">
        <span class="iconfont iconjiantou2" @click="goback"></span>
        <span class="iconfont iconnew"></span>
        <div
          @click="handleFollow"
          class="btnFollow"
          :class="{ unfollow: !postData.has_follow }"
        >
          {{ postData.has_follow ? "已关注" : "关注" }}
        </div>
      </div>
      <div class="mainContent">
        <div class="title">{{ postData.title }}</div>
        <div class="info">{{ postData.user.nickname }} 2020-10-11</div>
        <div class="content" v-html="postData.content"></div>
      </div>
    </div>
    <div class="videoPost" v-if="postData.type == 2">
      <!-- src播放地址  poster用户点击播放按钮前显示的图像   controls显示播放控件   -->
      <video
        poster="https://timgmb04.bdimg.com/timg?searchbox_feed&quality=100&wh_rate=0&size=b576_324&ref=http%3A%2F%2Fwww.baidu.com&sec=1568739067&di=612dd27cae470b93b01a4b32ef72fbac&src=http%3A%2F%2Fpic.rmb.bdstatic.com%2Fe18c6ffa079441431f8988ca4c3ac106.jpeg"
        controls
        src="https://video.pearvideo.com/mp4/adshort/20200421/cont-1670293-15098199_adpkg-ad_hd.mp4"
      ></video>
      <div class="info">
        <img src="@/assets/logo.png" alt="" class="avatar" />
        <div class="name">{{ postData.user.nickname }}</div>
        <div
          @click="handleFollow"
          class="btnFollow"
          :class="{ unfollow: !postData.has_follow }"
        >
          {{ postData.has_follow ? "已关注" : "关注" }}
        </div>
      </div>
      <div class="title">{{ postData.title }}</div>
    </div>
    <div class="btns">
      <div
        @click="handleLike"
        class="btn dianzan"
        :class="{ hasLike: postData.has_like }"
      >
        <span class="iconfont icondianzan"></span>
        {{ postData.like_length }}
      </div>

      <div class="btn weixin">
        <span class="iconfont iconweixin"></span>
        微信
      </div>
    </div>

    <!-- 这里是评论列表 -->
    <h2 class="commentTitle">精彩评论</h2>
    <CommentMain
      :commentData="comment"
      v-for="comment in commentList"
      :key="comment.id"
    />
    <div
      @click="$router.push('/morecomment/' + $route.params.id)"
      class="btnMoreComment"
    >
      更多跟帖
    </div>
    <CommentInput @reloadComment="reloadComment" />
  </div>
</template>

<script>
import CommentMain from "../components/Main";
import CommentInput from "../components/Input";
export default {
  components: {
    CommentMain,
    CommentInput
  },
  data() {
    return {
      postData: {},
      commentList: []
    };
  },
  created() {
    this.$axios({
      url: "/post/" + this.$route.params.id
    }).then(res => {
      console.log(res.data);
      this.postData = res.data.data;
    });

    // 获取评论详情列表
      this.reloadComment();
  },
  methods: {
    goback(){
      this.$router.back();

    },
    reloadComment() {
      this.$axios({
        url: "/post_comment/" + this.$route.params.id
      }).then(res => {
        if (res.data.data.length > 3) {
          res.data.data.length = 3;
        }
        this.commentList = res.data.data;
      });
    },
    handleFollow() {
      // 这里是关注按钮的点击事件,
      // 但是同一个按钮, 可能是关注也可能是取消关注
      // 后台要求发送的 api 地址不一样, 所以要进行判断后再发送
      // 用户 Id 可以通过 this.postData.user.id 获取
      if (this.postData.has_follow) {
        //取消
        this.$axios({
          //关注的是用户id，而不是文章id
          url: "/user_unfollow/" + this.postData.user.id
        }).then(res => {
          console.log(res.data);
          this.postData.has_follow = false;
        });
      } else {
        this.$axios({
          url: "/user_follows/" + this.postData.user.id
        }).then(res => {
          console.log(res.data);
          this.postData.has_follow = true;
        });
      }
    },
    handleLike() {
      this.$axios({
        // url: "/post_like/" + this.$router.params.id
        url: "/post_like/" + this.$route.params.id
      }).then(res => {
        console.log(res.data);
        // 这个点赞接口, 只有一个, 无论取消还是实施点赞,都是一个地址
        // 请求完毕的时候就可以根据相应数据, 来决定页面的显示
        // 这里取消成功或者点赞成功
        // 跟关注一样, 都有两种选择,
        // 1. 直接发送请求, 重新获取数据
        // 2. 可以直接改数据
        if (res.data.message == "取消成功") {
          this.postData.has_like = false;
          this.postData.like_length -= 1;
          this.$toast("取消成功");
        }
        if (res.data.message == "点赞成功") {
          this.postData.has_like = true;
          this.postData.like_length += 1;
          this.$toast.success("点赞成功");
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.commentTitle {
  text-align: center;
  font-size: 18/360 * 100vw;
  font-weight: 700;
  padding: 20/360 * 100vw;
}
.btnMoreComment {
  text-align: center;
  font-size: 18/360 * 100vw;
  width: 120/360 * 100vw;
  height: 30/360 * 100vw;
  line-height: 30/360 * 100vw;
  border: 1px solid #888;
  margin: 30/360 * 100vw auto;
  border-radius: 15/360 * 100vw;
  color: #666;
  margin-bottom: 80/360 * 100vw;
}
.normalPost {
  .header {
    display: flex;
    padding: 0 20/360 * 100vw;
    align-items: center;
    .iconnew {
      flex: 1;
      font-size: 54/360 * 100vw;
      padding-left: 10/360 * 100vw;
    }
    .btnFollow {
      font-size: 16/360 * 100vw;
      border: 1px solid #888;
      height: 30/360 * 100vw;
      line-height: 30/360 * 100vw;
      padding: 0 16/360 * 100vw;
      border-radius: 15/360 * 100vw;
      //同级添加样式要加个&符号
      &.unfollow {
        border-color: red;
        background-color: red;
        color: #fff;
      }
    }
  }
  .mainContent {
    padding: 0 20/360 * 100vw;
    .title {
      font-size: 20/360 * 100vw;
      font-weight: 700;
    }
    .info {
      font-size: 14/360 * 100vw;
      color: #888;
      padding-top: 10/360 * 100vw;
    }
    .content {
      /deep/ img {
        max-width: 100%;
      }
    }
  }
}

.videoPost {
  video {
    width: 100%;
  }
  .info {
    padding: 10/360 * 100vw;
    display: flex;
    align-items: center;
    .avatar {
      width: 40/360 * 100vw;
      height: 40/360 * 100vw;
      object-fit: cover;
      border-radius: 50%;
    }
    .name {
      flex: 1;
      padding-left: 10/360 * 100vw;
      color: #888;
    }
    .btnFollow {
      font-size: 16/360 * 100vw;
      border: 1px solid #888;
      height: 30/360 * 100vw;
      line-height: 30/360 * 100vw;
      padding: 0 16 /360 * 100vw;
      border-radius: 15/360 * 100vw;
      &.unfollow {
        border-color: red;
        background-color: red;
        color: #fff;
      }
    }
  }
  .title {
    padding: 10/360 * 100vw;
    font-size: 16/360 * 100vw;
    color: #333;
  }
}
.btns {
  display: flex;
  justify-content: space-evenly;
  padding: 20/360 * 100vw;
  border-bottom: 4/360 * 100vw solid #e4e4e4;
  .btn {
    border: 1px solid #888;
    font-size: 16/360 * 100vw;
    height: 30/360 * 100vw;
    line-height: 30/360 * 100vw;
    padding: 0 14 /360 * 100vw;
    border-radius: 15/360 * 100vw;
    .confont {
      padding-right: 2px;
    }
    .iconweixin {
      color: #00c800;
    }
    &.hasLike {
      color: red;
    }
  }
}
</style>